@mixin title-style {
  font-size: 28rpx;
  font-weight: bold;
  color: #202020;
  font-family: PingFang-SC-Bold;
}

@mixin sub-title-style {
  font-family: PingFang-SC-Medium;
  font-size: 26rpx;
  color: #484848;
}

@mixin flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@mixin flex-center-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin page-padding {
  background-color: #fff;
  padding: 30rpx 47rpx;
}

$primary: #FB0036;

.settled {
  background-color: #EEEEEE;
  .radio-package {
    @include page-padding;
    margin-top: 20rpx;
    .title {
      @include title-style;

      margin-bottom: 19rpx;
    }
    .radio-items {
      @include flex-center-between;

      margin-top: 19rpx;
      .titlle {
        @include sub-title-style;
      }
      .options {
        display: flex;
        align-items: center;
        .item {
          display: flex;
          align-items: center;
        }
        .item:first-child {
          margin-right: 36rpx;
        }
        .circle {
          width: 20rpx;
          height: 20rpx;
          border: 2rpx solid #ccc;
          border-radius: 50%;
          margin-right: 12rpx;
          box-sizing: border-box;
          position: relative;
          background: #fff;
        }
        .val {
          color: #787878;
          font-size: 26rpx;
        }
        .active {
          .val {
            color: $primary;
          }
          .circle {
            border-color: $primary;
          }
          .circle::after {
            content: "";
            display: block;
            width: 14rpx;
            height: 14rpx;
            background: $primary;
            border-radius: 50%;
            position: absolute;
            top: 1rpx;
            left: 1rpx;
          }
        }
      }
    }
  }
  .info {
    @include page-padding;
    margin-top: 20rpx;
    .title {
      @include title-style;
      margin-bottom: 23rpx;
    }
    .content {
      .item {
        margin-bottom: 19rpx;
        @include flex-center-between;
        .label, .value {
          @include sub-title-style;
        }
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
  .files {
    @include page-padding;
    margin-top: 20rpx;
    .title {
      @include title-style;
      margin-bottom: 23rpx;
    }
    .license {
      .sub-title {
        @include sub-title-style;
        margin-bottom: 16rpx;
      }
      .imgs {
        display: flex;
      }
      
      .img {
        width: 192rpx;
        height: 110rpx;
        max-height: 110rpx;
        margin-right: 18rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .img:last-child {
        margin-right: 0;
      }
    }
    .identity-card {
      margin-top: 23rpx;
    }
  }
  .action {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: $primary;
    height: 88rpx;
    @include flex-center-center;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    .footer {
      width: 100%;
      text-align: center;
    }
  }
  
}

.tips-message {
  background-color: #fff;
  width: calc(100vh * 0.42);
  border-radius: 30rpx;
  margin: 48rpx 48rpx 0 48rpx;
  &-title {
    @include title-style;
    font-size: 36rpx;
    text-align: center;
  }
  &-content {
    @include sub-title-style;
    font-size: 32rpx;
    margin: 47rpx 0;
    white-space: pre-line;
    text-align: center;
    line-height: 1.4em;
  }
  &-btn {
    font-size: 32rpx;
    color: #787878;
    border-top: 2rpx solid #EEEEEE;
    width: 100%;
    text-align: center;
    padding-top: 23rpx;
    padding-bottom: 36rpx;
  }
}